<!DOCTYPE html>
<html style="height: 100%">

<head>
<meta charset="utf-8" />
<title>echarts中国地图数据</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/echarts.min.js"></script>
<script type="text/javascript" src="../js/china.js"></script>
</head>

<body style="height: 100%; margin: 0">
	<div id="container" style="height: 100%"></div>
	<script type="text/javascript">
		var province = new Array();
		var valuelist = new Array();
		function randomData() {
			return 0;
		}
		var mydata = [ {
			name : '北京',
			value : '100'
		}, {
			name : '天津',
			value : randomData()
		}, {
			name : '上海',
			value : randomData()
		}, {
			name : '重庆',
			value : randomData()
		}, {
			name : '河北',
			value : randomData()
		}, {
			name : '河南',
			value : randomData()
		}, {
			name : '云南',
			value : randomData()
		}, {
			name : '辽宁',
			value : randomData()
		}, {
			name : '黑龙江',
			value : randomData()
		}, {
			name : '湖南',
			value : 1
		}, {
			name : '安徽',
			value : randomData()
		}, {
			name : '山东',
			value : randomData()
		}, {
			name : '新疆',
			value : randomData()
		}, {
			name : '江苏',
			value : randomData()
		}, {
			name : '浙江',
			value : randomData()
		}, {
			name : '江西',
			value : randomData()
		}, {
			name : '湖北',
			value : randomData()
		}, {
			name : '广西',
			value : randomData()
		}, {
			name : '甘肃',
			value : randomData()
		}, {
			name : '山西',
			value : randomData()
		}, {
			name : '内蒙古',
			value : randomData()
		}, {
			name : '陕西',
			value : randomData()
		}, {
			name : '吉林',
			value : randomData()
		}, {
			name : '福建',
			value : randomData()
		}, {
			name : '贵州',
			value : randomData()
		}, {
			name : '广东',
			value : randomData()
		}, {
			name : '青海',
			value : randomData()
		}, {
			name : '西藏',
			value : randomData()
		}, {
			name : '四川',
			value : randomData()
		}, {
			name : '宁夏',
			value : randomData()
		}, {
			name : '海南',
			value : randomData()
		}, {
			name : '台湾',
			value : randomData()
		}, {
			name : '香港',
			value : randomData()
		}, {
			name : '澳门',
			value : randomData()
		} ];
		$(function() {

			$.ajax({
				type : 'get',
				url : 'mapUser.form',
				dataType : 'json',
				success : function(data) {
					$.each(data, function(i, e) {

						province.push(e.province);

						valuelist.push(e.status);

					});
					$.each(mydata, function(i, e) {
						for (var j = 0; j < province.length; j++) {
							if (e.name == province[j]) {
								e.value = valuelist[j];
								console.log(e.value);
							}

						}
					});
					myChart.setOption(optionMap);
				},
				error : function(data) {

				}
			});
		});

		var optionMap = {
			backgroundColor : '#FFFFFF',
			title : {
				text : '全国地图大数据',
				subtext : '',
				x : 'center'
			},
			tooltip : {
				trigger : 'item'
			},

			//左侧小导航图标
			visualMap : {
				show : true,
				x : 'left',
				y : 'center',
				splitList : [ {
					start : 500,
					end : 600
				}, {
					start : 400,
					end : 500
				}, {
					start : 300,
					end : 400
				}, {
					start : 200,
					end : 300
				}, {
					start : 100,
					end : 200
				}, {
					start : 0,
					end : 100
				}, ],
				color : [ '#5475f5', '#9feaa5', '#85daef', '#74e2ca',
						'#e6ac53', '#9fb5ea' ]
			},

			//配置属性
			series : [ {
				name : '数据',
				zoom: 1.2,
				type : 'map',
				mapType : 'china',
				roam : true,
				label : {
					normal : {
						show : true
					//省份名称  
					},
					emphasis : {
						show : false
					}
				},
				data : mydata
			//数据
			} ]
		};

		//初始化echarts实例
		var myChart = echarts.init(document.getElementById('container'));

		//使用制定的配置项和数据显示图表
	</script>
</body>

</html>